<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<view class="cu-bar bg-gradual-pink">
				<view class="action" @tap="exit()">
					<text class="cuIcon-exit text-gray"></text> 退出
				</view>
				<view class="content text-bold">

				</view>
			</view>

			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+ item.avatar +')'}]"></view>
					<view class="content" @click="info(index,item.userId)">
						<view class="text-grey">{{item.nick}}</view>
						<view class="text-gray text-sm">
							<text class="margin-right-xs"></text>{{item.mes}}</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.notiyTime}}</view>
						<view class="cu-tag round bg-red sm">{{item.offlineCount}}</view>
					</view>
					<view class="move">
						<view class="bg-red" @click="del(index,item.userId)">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				list: this.$soket.list,
				curUser: this.$soket.curUser,
				name: '',
				token: ''
			};
		},
		methods: {
			// 跳转聊天页面
			info(index, friendId) {
				console.log("friendId======", friendId)
				console.log("index======", index)


				var friend = this.$soket.getOnlineUserById(friendId);
				uni.setStorageSync("friendId", friendId);
				uni.setStorageSync("friendName", friend.nick);
				
				if (this.list[index].offlineCount >= 1) {
					this.list[index].offlineCount = 0;
				}
				
				uni.navigateTo({
					url: 'morepeople',
					fail: function(e) {
						console.log(e);
					}
				});

				// this.list.splice(index, 1);
				// var indexOf = this.$soket.listKey.indexOf(userId);
				// if (indexOf > -1) {
				// 	this.$soket.listKey.splice(indexOf, 1);
				// }
			},
			//校验用户信息OL
			initAuth() {
				let that = this;
				var baseServer = 'http://192.168.0.110/im/api/auth';
				// var baseServer = '/im/api/auth';
				uni.request({
					method: 'POST',
					url: baseServer,
					sslVerify: false,
					data: {
						'token': uni.getStorageSync('token')
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
					},
					success: (res) => {
						if (res.data.code === 'success') {
							//建立soket通信
							var globalUserId = res.data.data.userId;
							var limitFlag = res.data.data.limitFlag;
							that.$soket.connectSocketInit('ws://192.168.0.110:8888', res.data.data.key, globalUserId, limitFlag);
							//that.$refs.popup.open();
						}
					}
				});
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			del(index, userId) {
				this.list.splice(index, 1);
				var indexOf = this.$soket.listKey.indexOf(userId);
				if (indexOf > -1) {
					this.$soket.listKey.splice(indexOf, 1);
				}
			},
			exit() {
				try {
					//关闭soket
					this.$soket.websokect.close(function(res) {
						console.log('WebSocket 已关闭！');
					});
					//清除缓存
					uni.clearStorageSync();
					//跳转到登录页
					uni.redirectTo({
						url: '../login/login'
					});
				} catch (e) {
					// error  
					console.log(e);
				}

			}
		},
		onLoad() {
			console.log("onLoad");
			this.name = uni.getStorageSync('name');
			this.token = uni.getStorageSync('token');
			this.initAuth();
		},
		onShow() {
			console.log("onShow");

		},
		onHide() {
			console.log("onHide");

		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.popup-content {
		background-color: #fff;
		padding: 15px;
	}
</style>
